<template>
  <div class="search_container">
      <Top></Top>
      <div class="search_content">
          <div class="top_back">
              <el-page-header @back="goBack">
            </el-page-header>
          </div>
          <div class="content_item">
              <template v-for="(item,index) in content_list">
              <router-link :to="{name:'PhotoInfo',query:{pic_url:item.url}}" :key="index">
                  <el-image :src="item.url" alt="" lazy class="img_list">
                      <div slot="placeholder" class="image-slot">
                    <img src="../assets/images/loading.png" alt="">
                </div>
                  </el-image>
                  
              </router-link>
          </template>
          </div>
          <div class="bottom_pages">
          <el-pagination
             @current-change="handleCurrentChange"
            background
            :current-page="currentPage" 
            layout="prev, pager, next,jumper"
            :total="500">
            </el-pagination>
      </div>
      </div>
        <Bottom></Bottom> 
  </div>
</template>

<script>
import Top from '../components/home/Top.vue'
import Bottom from '../components/home/Bottom.vue'
export default {
    components:{
        Top,
        Bottom
    },
    data() {
        return {
            content_list:[],
            start:0,
             // 默认显示第几页
            currentPage:1,      
        }
    },
    methods:{
        goBack() {
            this.$router.push('/')
      },
      getData(){
          var url='https://realwds-api.vercel.app/360/search?kw='+this.$route.query.kw+'&start='+this.start+'&count=21'
            this.$axios.get(url)
            .then(res=>{
                // console.log(res.data.data.data);
                this.content_list=res.data.data.data
            })
      },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
           this.start=this.currentPage*21-21
        //    console.log(this.currentPage);
        //    console.log(this.start);
           this.getData()
           //点击分页实现回到顶部
           window.scrollTo(0,0);
       }
    },
    created(){
        this.getData()
    },
    watch:{
        $route() {
            this.$router.go(0)
        }
    }
}
</script>

<style scoped>
    .search_container{
        width: 100%;
    }
    .search_content{
        width: 1200px;
        min-width: 1200px;
        margin: 0 auto;
    }
    .top_back{
        width: 100%;
        height: 40px;
        
    }
    .el-page-header{
        height: 60px;
        line-height: 60px;
    }
    .el-icon-back{
        line-height: 30px;
    }
    .content_item{
        margin-top: 20px;
        width: 100%;
        height: 1640.48px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .content_item .img_list{
        width: 390px;
        height: 220px;
        margin-bottom: 10px;
        position: relative;
        cursor: pointer;
    }
    .content_item .img_list:hover{
        box-shadow: 0px 0px 10px 3px black;
        transition: all .4s;
    }
    .image-slot img{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
    }
    .bottom_pages{
        width: 100%;
        margin: 20px 0px 30px 0px;
        text-align: center;
    }
</style>